<template>
  <div>
    <h3>{{ title }}</h3>
    <v-row class="ma-0" v-if="courses">
      <v-col
        md="4"
        v-for="course of courses"
        :key="course._id"
        class="pa-0 pr-4 mt-2"
      >
        <v-card class="mx-auto" max-width="400">
          <router-link :to="`/courses/${course._id}`">
            <v-img
              class="white--text align-end"
              height="200px"
              :lazy-src="course.cover"
              :src="course.cover"
            >
              <v-card-title>{{ course.name }}</v-card-title>
              <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                  <v-progress-circular
                    indeterminate
                    color="grey lighten-5"
                  ></v-progress-circular>
                </v-row>
              </template>
            </v-img>

            <v-card-subtitle class="pb-0 mb-2"
              >{{ dayjs(course.createdAt).format('YYYY-MM-DD hh:mm:ss') }}
            </v-card-subtitle>

            <v-card-text class="text--primary">
              <div v-if="course.categories.length">
                <span
                  class="tag"
                  v-for="(cate, index) of course.categories"
                  :key="index"
                  >{{ cate.name }}</span
                >
              </div>
              <div v-else>
                <span class="tag-info">暂无内容</span>
              </div>

              <div class="mt-2">{{ course.description }}</div>
            </v-card-text>
          </router-link>
          <v-card-actions class="card-actions">
            <div>
              <LikeBtn
                type="Course"
                name="like"
                icon="mdi-thumb-up"
                title="点赞"
                icon-color="pink"
                :object="course._id"
              />
              <LikeBtn
                type="Course"
                name="collect"
                icon="mdi-heart"
                title="收藏"
                icon-color="#f1c40f"
                :object="course._id"
              />
            </div>
            <Browse :id="course._id" />
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import * as dayjs from 'dayjs'
import Browse from './Browse.vue'

export default {
  props: {
    courses: {
      type: Array,
      required: true,
      default: () => [],
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      dayjs,
    }
  },
  components: { Browse },
}
</script>

<style scoped lang="scss">
.card-actions {
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;
  }
}
</style>
